import React, { useEffect, useState } from 'react';
import { Button, Table, Input } from 'antd'
import { useNavigate, NavLink } from 'react-router-dom';
import * as service from '../../../api/Statistics'
import './styles/systemnotice.scss'
import ExportJsonExcel from "js-export-excel"

interface Props {

}
const { Search } = Input;
// 系统操作  列表渲染
function SystemNotice(props: Props) {
  var navigate = useNavigate()
  const [data, setData] = useState([])
  var [pagination, setPagination] = useState({ current: 1, pageSize: 5});

  useEffect(() => {
    noticelist()
  }, [])

  const noticelist = () => {
    service.notice_list().then(res => {
      // console.log("公告列表",res);

      setData(res.data.data)
      // setPagination({
      //   ...pagination,
      //   total: res.data.length
      // })
    })
  }

  const handleChange = (pagi: any) => {
    // console.log(pagi);
    setPagination(pagi);//更新页码
  }

  //搜索框查询数据
  const onSearch = (value: string) => {
    // console.log(value);
    service.noticeSearch({ noticeName: value }).then((res) => {
      console.log(res);
      setData(res.data.data)
    })
  };

  // 删除单个信息
  const myDelete = (row: any) => {
    // console.log(row);
    service.notice_delete({ noticeId
      : row.noticeId
    }).then((res) => {
      console.log(res)
      noticelist()
    })
  }

  const columns = [
    {
      title: '序号',
      render: (_: any, record: never) => <a>{data.indexOf(record) + 1}</a>,//动态渲染标签/组件
    },

    {

      title: '消息标题',
      dataIndex: 'noticeName',

    },
    {

      title: '消息内容',
      dataIndex: 'noticeContent',
      width: '450px'
    },
    {

      title: '发布人',
      dataIndex: 'journalName',
    },
    {

      title: '状态',
      render: (_: any, row: any) => { 
        return (
          <>
            {
              row.noticeState?"已发布":"待发布"
           }
          </>
        )
      }
    },
    {

      title: '操作时间',
      render: (_: any, row: any) => { 
        return (
          <>
            {
              row.noticeEdit?row.noticeEdit:row.noticeTime
           }
          </>
        )
      }
    },
    
    
    {

      title: '操作',
      render: (_: any, row: any) => {
        // console.log(row);
        return (
          <>
            <NavLink style={{ marginRight: 5, color: 'blue' }} to="/index/system-editnotice" state={{ row, type: "edit" }}>编辑</NavLink>
            <span style={{ color: 'red' }} onClick={() => { myDelete(row) }}>删除</span>
          </>
        )
      }
    },
  ];
  let excel = () => {//导出Excel表
    let sheetFilter = ["noticeName", "noticeContent", 'journalName', '已发布', 'noticeTime']//需要导出的属性，一般列表数据的属性
    let option = { fileName: "", datas: [{}] };
    option.fileName = "公告列表";
    option.datas = [
        {
            sheetData: data,//需要导出的数据
            sheetName: "公告列表",
            sheetFilter: sheetFilter,
            sheetHeader: ["消息标题", "消息内容", "操作人", "状态", "操作时间"],//每一列的列头
            columnWidth: [20, 20, 20, 20],//每一列的宽
        }
    ]
    let toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
}
  return (
    <div className='system-notice'>
      <h4> 系统公告</h4> 
      <div className='notice-header'>
        <Search placeholder="请输入消息标题" allowClear onSearch={onSearch} style={{ width: 200 }} />
        <div className="left">
        <Button type="primary" >
          <NavLink to="/index/system-editnotice" className='btn' state={{ type: "add" }}>新增系统公告</NavLink>
        </Button>
        <Button onClick={() => { excel() }}>导出</Button>

        </div>
     
      </div>
      <div className="table">
        <Table columns={columns} dataSource={data}
          rowKey={(row: any) => row.noticeId}
          pagination={pagination}
          onChange={(pagi) => { handleChange(pagi) }}
        />
      </div>
    </div>
  );
}

export default SystemNotice;